<template>
    <div>
        <a-drawer
                :bodyStyle="{ padding: '0' }"
                placement="right"
                :z-index="9990"
                :visible="show"
                :closable="false"
                width="100%">
            <a-page-header
                    title="文章预览"
                    @back="show=false"
            />
            <div style="margin-left: 30px; margin-right: 30px">
                <a-card>
                    <a-row :gutter="20">
                        <a-col :md="16" :span="24">
                            <span>标题：</span>
                            <h1>{{pAtc.title}}</h1>
                            <span>作者：</span>
                            <a  class="MySize" style="color: orange; text-decoration: none; font-weight: bold" target="_blank" :href="'https://jxjlife.cn/user/'+pAtc.uid">
                                {{uname}}
                            </a>
                            <br/>
                            <span>简介：</span>
                            <strong class="MySize">
                                {{pAtc.des}}
                            </strong>
                            <br/>
                            <span>标签：</span>
                            <strong class="MySize">
                                {{pAtc.tag}}
                            </strong>
                            <br/>
                            <span>时间：</span>
                            <strong class="MySize">
                                {{pAtc.theTime}}
                            </strong>
                        </a-col>
                        <a-col :md="8" :span="24">
                            <img style="width: 100%; border-radius: 10px" :src="pAtc.img"/>
                        </a-col>
                    </a-row>
                </a-card>
                <br/>
                <a-card :bodyStyle="{ padding: '0' }">
                    <mavon-editor
                            :boxShadow="false"
                            :subfield="false"
                            defaultOpen="preview"
                            :toolbarsFlag="false"
                            :autofocus="false"
                            v-model="pAtc.text"
                            style="z-index: 1"
                            :editable="false"/>
                </a-card>
            </div>
            <br/>
        </a-drawer>

        <a-button type="primary" @click="getData">刷新</a-button>
        <a-divider type="vertical"/>
        <a-button type="primary" @click="passAll">通过全部</a-button>
        <br/>
        <a-list style="margin-top: 10px">
            <a-list-item v-for="i in list" :key="i.content.id">
                <a-list-item-meta>
                    <a slot="title" style="font-weight: bold" @click="prev(i.content.id)">{{i.content.title}}</a>
                </a-list-item-meta>
                {{i.user.name}}
                <a-divider type="vertical"/>
                {{i.content.theTime}}
                <span style="float: right">
                    <a-button type="primary" size="small" @click="pass(i.content.id)">通过</a-button>
                    <a-divider type="vertical"/>
                    <a-button type="danger" size="small" @click="del(i.content.id)">删除</a-button>
                </span>
            </a-list-item>
        </a-list>
    </div>
</template>

<script>
    export default {
        name: "AtcCheck",
        data(){
            return{
                show: false,
                list: [],
                pAtc: '',
                uname: '',
            }
        },
        methods:{
            pass(id){
                const t = this;
                axios.get('/admin/pass/'+id).then(function (resp) {
                    t.getData();
                    t.$message.success('已通过');
                })
            },
            passAll(){
                const t = this;
                axios.get('/admin/passAll').then(function (resp) {
                    t.getData();
                    t.$message.success('已通过');
                })
            },
            prev(id){
                this.show = true;
                const t = this;
                axios.get('/atc/np/getById/'+id).then(function (resp) {
                    t.pAtc = resp.data;
                    axios.get('/user/getUserBy/'+t.pAtc.uid).then(function (resp2) {
                        t.uname = resp2.data.name;
                    })
                })
            },
            del(id){
                const t = this;
                axios.get('/admin/delNP/'+id).then(function (resp) {
                    t.getData();
                    t.$message.success('已删除');
                })
            },
            getData(){
                const t = this;
                axios.get('/admin/getAllNP').then(function (resp) {
                    t.list = resp.data;
                })
            }
        },
        created() {
            this.getData();
        }
    }
</script>

<style scoped>
    .MySize{
        font-size: medium;
    }
</style>